<template>
  <ProConfigProvider>
    <router-view #="{ Component }">
      <component :is="Component" />
    </router-view>
    <LockScreen />
  </ProConfigProvider>
</template>

<script setup lang="ts">
  import { watchEffect } from 'vue';
  import { useRoute } from 'vue-router';
  import { transformI18n } from './hooks/useI18n';
  import { LockScreen } from '@/components/basic/lockscreen';

  const route = useRoute();

  watchEffect(() => {
    if (route.meta?.title) {
      const processTitle = import.meta.env.VITE_APP_TITLE || 'CodeDriver';
      // 翻译网页标题
      document.title = `${processTitle} | ${transformI18n(route.meta.title)}`;
    }
  });
</script>
<style lang="less">
  @import '@/styles/navTheme.less';

  @SecBackClassName: split-wrapper;
  .themeSetStyle(@SecBackClassName, background-color,'sec-back');

  .split-wrapper {
    background-color: #fff;
  }

  .router-view-content {
    background-color: #F2F5F7;
  }
</style>
